<template>
  <div class="bod">
	  <div class="jianbian">
		  
	  </div>
	<swiper :options="swiperOption" ref="mySwiper">
	  <swiper-slide style="min-width: 106px; width: 200px;" v-for="(item,index) in rightBox" :key="index">
		  <div class="bod-box">
		      <div style="position: relative;">
		  		<div class="sanjiao" :style="{borderTopColor: item.color,borderLeftColor: item.color}">
		  			<div>{{index+1}}</div>
		  		</div>
		  	</div>
		  	<div style="font-size: 16px;line-height: 16px;margin-bottom: 20px;">{{item.name}}</div>
		  	<div class="num" :style="{color:item.fontColor}">
		  		<div style="font-size: 32px;line-height: 32px;font-family: DINPro-Medium;">{{item.num}}</div>
		  		<div style="font-size: 12px;">分</div>
		  	</div>
		  </div>
	  </swiper-slide>
	  <div class="swiper-pagination" slot="pagination"></div>
	</swiper>
	<div class="swiper-button-prevb" slot="button-prev" v-show="imgIndex != 1">
		<img src="../../../assets/img/bigjiantou2.png" />
	</div>
	<div class="swiper-button-nextb" slot="button-next">
		<img src="../../../assets/img/bigjiantou.png" />
	</div>
  </div>
</template>

<script>
export default {
    props: {
        rightBox:{
			type:Array
		}
    },
    data() {
		const that = this;
        return {
			imgIndex:1,
            swiperOption: {
            	// loop: true,
            	/* autoplay: {
            	  delay: 3000,
            	  stopOnLastSlide: false,
            	  disableOnInteraction: false
            	}, */
				width:116,
            	// 显示分页
            	/* pagination: {
            	  el: ".swiper-pagination",
            	  clickable: true //允许分页点击跳转
            	}, */
            	// 设置点击箭头
            	navigation: {
            	  nextEl: ".swiper-button-nextb",
            	  prevEl: ".swiper-button-prevb"
            	},
				on: {
					slideChangeTransitionStart: function() {
						that.imgIndex = this.realIndex + 1;  //获取轮播图片下标索引；这里有一个坑，之前网上找到的是用activeIndex，但后来网上说的是这个realIndex，原来activeIndex是swiper2.0的；而realIndex是swiper3.0的，（使用realIndex才实现了下标索引）
						console.log(that.imgIndex);
					}
				}
              }
        }
    },
	created() {
		
	},
    methods: {
        right(){
			this.$emit('right')
		}
    }
}
</script>
<style scoped lang="scss">
	.bod{
		display: flex;
		position: relative;
		align-items: center;
		
		.bod-box{
			// width: 106px;
			min-width: 106px;
			flex: 1;
			height: 147px;
			background-color: #091344;
			margin-right: 10px;
			text-align: center;
			color: #FFFFFF;
			border: 1px solid #222855;
		}
	}
	.sanjiao{
		width:0;
		height:0;
		border: 15px solid;
		// border-color:#273560 transparent transparent #273560;/*透明 透明  灰*/
		border-top-color: #273560;
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-left-color: #273560;
		
		div{
			position: absolute;
			left: 5px;
			top: 5px;
			color: #FFFFFF;
			font-size: 14px;
			line-height: 14px;
		}
	}
	
	.buttons{
		width: 32px;
		height: 32px;
		background-color: #273560;
		line-height: 32px;
		color: #FFFFFF;
		text-align: center;
		border-radius: 25px;
		opacity: 0.5;
	}
	
	.buttonsleft{
		position: fixed;
		margin-top: 60px;
		margin-left: 0;
	}
	
	.buttonsright{
		position: fixed;
		margin-top: 60px;
		right: 0;
		margin-right: 0;
	}
	
	.num{
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}
	
	.recommendPage .swiper-container{
	    position: relative;
	    width: 100%;
	  }
	  .recommendPage .swiper-container .swiper-slide{
	    width: 100%;
	  }
	  
	  .swiper-button-prevb{
		color:#FFFFFF;
		left: 0;
		width:32px;
		height:32px;
		border-radius: 25px;
		background-color: #222855;
		position: absolute;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	  }
	  
	  .swiper-button-nextb{
		color:#FFFFFF;
		right: 0;
		width:32px;
		height:32px;
		border-radius: 25px;
		background-color: #222855;
		position: absolute;
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	  }
	  
	  .swiper-slide{
		  width: 116px !important;
	  }
	  
	  .swiper{
		  width: 116px !important;
	  }
	  
	  .swiper-container{
		  margin: 0 !important;
	  }
	  
	  .jianbian{
		  width: 80px;
		  height: 149px;
		  background-image: linear-gradient(to right, rgba(255,0,0,0), #050b31);
		  position: absolute;
		  z-index: 2;
		  right: 0;
	  }
</style>
